<template>
    <div class="login-container">
        <div class="login-form">
            <h3>{{ isLogin ? '账号密码登录' : '账号密码注册' }}</h3>
            <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" :prefix-icon="Lock" type="password"
                        show-password></el-input>
                </el-form-item>
                <el-form-item v-if="!isLogin" prop="rePassword">
                    <el-input v-model="loginForm.rePassword" placeholder="请再次确认密码" :prefix-icon="Lock" type="password"
                        show-password />
                </el-form-item>
                <div class="form-footer">
                    <!-- <el-checkbox v-model="loginForm.remember">记住我</el-checkbox> -->
                    <el-link type="primary" @click="isLogin = !isLogin">{{ isLogin ? '注册账号' : '已有帐号,立即登录' }}</el-link>
                    <el-link type="primary" v-if="isLogin">忘记密码?</el-link>
                </div>
                <el-form-item>
                    <el-button type="primary" class="login-button" @click="handleLogin">{{ isLogin ?
                        '登录' : '注册' }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-divider direction="vertical" v-if="isLogin" />
        <div class="qrcode-login" v-if="isLogin">
            <h3>微信登录</h3>
            <div class="qrcode-container">
                <div class="qrcode-placeholder"></div>
                <p>请使用微信扫码登录</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { User, Lock } from "@element-plus/icons-vue"
import { useAuthStore } from "@/stores/auth";
import { login } from "@/api/user";

const props = defineProps({
    // 可以添加自定义属性
})
// 登录成功和失败事件, 用于父组件监听
const emit = defineEmits(['login-success', 'login-failed'])

const authStore = useAuthStore()
const loginFormRef = ref(null)
const isLogin = ref(true)

// 登录表单数据
const loginForm = reactive({
    username: '',
    password: '',
    rePassword: '',
    // remember: false
})

// 表单验证规则
const loginRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度应在3到20个字符之间', trigger: 'blur' },
        { pattern: /^[a-zA-Z]+$/, message: '用户名只能包含英文字母', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9]+$/, message: '密码必须包含英文字母和数字', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度应在6到20个字符之间', trigger: 'blur' }
    ],
    rePassword: [
        { required: true, message: '请再次确认密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== loginForm.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ],
}

// 处理登录
const handleLogin = () => {
    if (!loginFormRef.value) return
    loginFormRef.value.validate((valid) => {
        if (valid) {
            // 调用登录的api
            login(loginForm).then((res) => {
                authStore.setToken(res.data.token)
                authStore.setUser(res.data.user)
                emit('login-success')
            })
        } else {
            emit('login-failed')
        }
    })
}

// 重置表单
const resetForm = () => {
    if (loginFormRef.value) {
        loginFormRef.value.resetFields()
    }
}

// 暴露方法给父组件
defineExpose({
    resetForm
})
</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    min-height: 300px;

    .el-divider {
        height: 20em;
    }
}

.login-form {
    flex: 1;
    padding: 0 20px;

    h3 {
        margin-top: 0;
        margin-bottom: 20px;
        font-weight: 500;
        color: #303133;
        text-align: center;
    }

    .form-footer {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .login-button {
        width: 100%;
        height: 40px;
        font-size: 16px;
        border-radius: 4px;
    }
}

.qrcode-login {
    flex: 1;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    h3 {
        margin-top: 0;
        margin-bottom: 20px;
        font-weight: 500;
        color: #303133;
        text-align: center;
    }

    .qrcode-container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .qrcode-placeholder {
            width: 180px;
            height: 180px;
            background-color: #f0f0f0;
            margin-bottom: 15px;
        }

        p {
            color: #606266;
            font-size: 14px;
        }
    }
}
</style>